<template>
  <div class="softwareLibrary-container">
    <el-row class="softwareLibrary-row">
      <el-col :span="15" style="margin-bottom:28px">
        <li @click="tabChange('1025')"><span :class="{'bagPop': tabActive == 1025,'tabli': true}">全部软件</span><el-divider direction="vertical" /></li>

        <li
          v-for="(item,index) in options"
          :key="item.id"
          @click="tabChange(item.id)"
        >
          <span :class="{'bagPop': tabActive == item.id,'tabli': true}">{{ item.name }}</span>
          <el-divider v-if="index+1 < options.length" direction="vertical" />
          <!-- <el-divider v-if="index+1 == options.length && isManage" direction="vertical" /> -->
        </li>
        <!-- <li v-if="isManage">
          <span :class="{'bagPop': tabActive == 55904214559285248,'tabli': true}" @click="dialogTableVisible = true">类型管理</span></li> -->
      </el-col>
      <!-- <el-col :span="9" style="text-align: right;">
        <el-select
          v-model="listQuery.departId"
          style="width:130px;padding-right:12px"
          placeholder="请选择部门"
          size="mini"
          clearable
          @change="queryDepartC"
        >
          <el-option
            v-for="item in options10"
            :key="item.id"
            style="display: list-item;"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <el-input
          v-model="listQuery.search"
          style="width:130px;padding-right:12px"
          :placeholder="placeholderName"
          size="mini"
        />
        <el-button size="mini" type="primary" @click="getList">
          搜索
        </el-button>
      </el-col> -->
      <!-- <el-col :span="4" style="text-align: right;padding-right:20px">
        <el-select
          v-model="listQuery.departId"
          placeholder="请选择部门"
          size="mini"
          clearable
          @change="queryDepartC"
        >
          <el-option
            v-for="item in options10"
            :key="item.id"
            style="display: list-item;"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-col>
      <el-col :span="4" style="margin-bottom:20px">
        <el-input
          v-model="listQuery.search"
          placeholder="请输入内容"
          size="mini"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" @click="getList" />
        </el-input>
      </el-col> -->
    </el-row>
    <el-dialog
      title="类型管理"
      :visible.sync="addTypedialogV"
      width="25%"
      center
    >
      <el-form
        label-width="100px"
        size="mini"
      >
        <el-form-item label="类型名称:">
          <el-input v-model="typeName" :maxlength="4" :minlength="2" />
        </el-form-item>
        <el-form-item label="说明:">
          <el-input v-model="typeDec" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="addNewType">确 定</el-button>
        <el-button size="mini" @click="addTypedialogV = false">取 消</el-button>
      </span></el-dialog>
    <el-dialog title="软件类型管理" :visible.sync="dialogTableVisible" width="500">
      <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 20px"
        @click="addNewType('add')"
      >新增类型</el-button>
      <el-table
        :data="options"
        style="width: 100%;
         max-height: 360px;
        overflow: scroll;"
      >
        <el-table-column label="类型名称" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="scope">
            <span>{{ scope.row.descr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addNewType('edit',scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="addNewType('del',scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
<!--    :title="openurlTitle"-->
<!--    .el-dialog__header .el-dialog__body-->
    <el-dialog class="iframe-parent"  :visible.sync="dialogOpenUrl" top="8vh" width="80%" height="90%">
      <iframe
        :src="openUrlCache"
        scrolling="auto"
        class="innerIframe"
        frameborder="1"
        marginheight="10px"
      />
    </el-dialog>
    <div class="softwareLibrary-text">
      <el-table
        v-loading="listLoading"
        element-loading-text="正在加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        :data="list"
        style="width: 100%"
        @row-dblclick="rowDbclick"
      >
        <el-table-column
          label="软件名称"
          width="300"
        >
          <template slot-scope="scope">
            <el-row>
              <el-col :span="24">
                <img
                  v-if="scope.row.logo != ''"
                  style="width: 48px; height: 48px;margin-right: 10px; float:left"
                  :src="scope.row.logo"
                  fit="fit"
                >
                <img
                  v-if="scope.row.logo == ''"
                  style="width: 48px; height: 48px;margin-right: 10px; float:left"
                  src="../../assets/images/logMoren.png"
                  fit="fit"
                >
                <div class="desc strinExceeds" :title="scope.row.softVersion">{{ scope.row.softVersion }}</div>
                <div class="desc strinExceeds">{{ scope.row.name }}</div>
                <!-- <div class="desc strinExceeds" :title="scope.row.descr">{{ scope.row.descr }}</div> -->
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          width=""
          label="软件编号"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.softNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="来源" width="100" align="center">
          <template slot-scope="scope">
            {{ scope.row.type == 0 ? '库内' : '库外' }}
          </template>
        </el-table-column>
        <el-table-column width="120" label="是否国内" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.softFrom ? '国内' : '国外' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="软件大小"
          width="150"
        >
          <template slot-scope="scope">
            <!--            <el-popover trigger="hover" placement="top">-->
            <!-- <p>姓名: {{ scope.row.name }}</p> -->
            <!--              <p>详细大小: {{ scope.row.size }}字节</p>-->
            <!--              <div slot="reference" class="name-wrapper">-->
            <span>{{ scope.row.sizeWithUnit }}</span>
            <!--              </div>-->
            <!-- </el-popover> -->
          </template>
        </el-table-column>
        <el-table-column label="详情" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="handleDetails(scope.row, 'detail')"
            >详情</el-button>
            <!--            <el-button-->
            <!--              type="text"-->
            <!--              size="mini"-->
            <!--              data-clipboard-action="copy"-->
            <!--              class="cobyOrderSn"-->
            <!--              :data-clipboard-text="scope.row.downloadUrl"-->
            <!--              @click="copySpecialTopicUrl(scope.row)"-->
            <!--            >复制下载地址</el-button>-->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="220"  fixed="right">
          <template slot-scope="scope">
            <el-button
              style="width: 80px"
              v-if="!scope.row.isPCInstall"
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >下载</el-button>
            <el-button
              style="width: 80px"
              v-if="scope.row.webUrl&&!scope.row.isPCInstall"
              type="primary"
              size="mini"
              @click="handleEdit('open', scope.row)"
            >下载页面</el-button>
            <label-wrap
              style="width: 80px"
              v-if="scope.row.isPCInstall"
              type="info"
              size="mini"
            >已安装</label-wrap>

          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { softList, softAdd, softDel, softPut, softTypeList, softTypeAdd, softTypePut, softTypeDel
} from '@/api/softManage'
import {
  departmentList
} from '@/api/department'
import Pagination from '@/components/Pagination'
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
  name: 'Dashboard',
  components: {
    Pagination
  },
  computed: {
    ...mapGetters([
      'name',
      'userInfo'
    ]),
    isManage() {
      return (this.$route.query.user && this.$route.query.user.roleType === 1) ||
      (this.userInfo && this.userInfo.roleType === 1 && this.userInfo.roleType !== undefined)
    }
  },
  created() {
    this.getDepartmentList()
    this.getTypeList()
    this.fetchData()
  },
  data() {
    return {
      openurlTitle: '链接',
      openUrlCache: '',
      dialogOpenUrl: false,
      logMorenUrl: '../../assets/images/logMoren.png',
      typeCache: {},
      typeDec: '',
      typeName: '',
      addTypedialogV: false,
      dialogTableVisible: false,
      listLoading: false,
      addTypeName: '',
      visible: false,
      options: [],
      options10: [],
      total: 10,
      listQuery: {
        departId: '',
        page: 1,
        limit: 10,
        typeId: '',
        search: '',
        menuFrom: 0
      },
      list: null,
      tabActive: '1025',
      tableData: [{
        isDownload: false,
        details: '软件说明',
        size: '***M',
        name: '天霸1号',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        isDownload: true,
        details: '软件说明',
        size: '***M',
        name: '天霸2号',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      activeName: 'allSoftware',
      placeholderName: '请输入软件名称'
    }
  },
  methods: {
    getDepartmentList() {
      departmentList({
        limit: 50,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options10 = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options10.push(item)
            }
          })
        }
      })
    },
    queryDepartC(val) {
      if (val) {
        this.placeholderName = '全部软件'
      } else {
        this.placeholderName = '全部软件'
      }
      // this.getList()
    },
    rowDbclick(val, val1) {
      this.handleDetails(val, 'detail')
    },
    addNewType(params, params1) {
      if (params === 'add') {
        this.addTypedialogV = true
      } else if (params === 'del') {
        this.$confirm('确定删除吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          softTypeDel({
            ids: params1.id
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.getTypeList()
            }
          })
        }).catch(() => {
          this.$message.info('已点击取消')
        })
      } else if (params === 'edit') {
        this.typeCache = params1
        this.typeName = params1.name
        this.typeDec = params1.remark
        this.addTypedialogV = true
      } else {
        if (this.typeName.length > 2) {
          if (this.typeCache.id) {
            softTypePut({
              id: this.typeCache.id,
              name: this.typeName,
              remark: this.typeDec,
              sortNum: 0
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('修改成功')
                this.addTypedialogV = false
                this.getTypeList()
              }
            })
          } else {
            softTypeAdd({
              name: this.typeName,
              remark: this.typeDec,
              sortNum: 0
            }).then(res => {
              if (res.code === 200) {
                this.$message.success('添加成功')
                this.addTypedialogV = false
                this.getTypeList()
              }
            })
          }
        } else {
          this.$message.warning('请输入2-4个字符的软件类型!')
        }
      }
    },
    getTypeList() {
      softTypeList({
        limit: 20,
        page: 1
      }).then(res => {
        if (res.code === 200) {
          this.options = []
          res.data.data.map(item => {
            if (item.id !== '1025' && item.id !== '55904214559285248') {
              this.options.push(item)
            }
          })
        }
      })
    },
    copySpecialTopicUrl(row) {
      var oInput = document.createElement('input') // 创建一个隐藏input（重要！）
      oInput.value = row.downloadUrl // 赋值
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      oInput.className = 'oInput'
      oInput.style.display = 'none'
      this.$message.success('复制成功')
    },
    getList() {
      this.listLoading = true
      softList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.totalCount
        this.listLoading = false
        // this.$router.go(0)
      })
    },
    fetchData() {
      this.getList()
    },
    tabChange(params) {
      this.listQuery.typeId = params
      if (params !== '55904214559285248') {
        this.getList()
        this.tabActive = params
      } else {
        // this.activeName = '1025'
      }
    },
    copyUrl(params) {
    },
    handleDetails(params, type) {
      // 鹿星要求与管理页面详情显示一直 2020-09-24 18:14:42
      // type='softmanage'
      this.$router.push({ path: '/dashboard/softwareLibraryDetails',
        query: {
          software: params,
          type: type
        }})
    },
    handleEdit(index, row) {
      if (index == 'open') {
        this.dialogOpenUrl = true
        this.openUrlCache = row.webUrl
        this.openurlTitle = row.softVersion
        // window.open(row, '_blank');
      } else if (index === 'apply') {
        this.handleDetails('row', 'apply')
      } else {
        // window.location.href = row.downloadUrl
        window.location.href = 'http://10.10.10.11:9006/file/download?id=' + row.id
      }
    },
    handleDelete(index, row) {
    },
    handleClick(tab, event) {
    }
  }

}
</script>
<style >
  .innerIframe{
    height: calc(88vh);
    width: 100%;
  }
  .iframe-parent{
    padding: 0 !important;;
  }
  .iframe-parent .el-dialog__header{
    padding: 0 !important;;
  }
  .iframe-parent .el-dialog__body {
    padding: 0 !important;
  }
</style>
<style lang="scss" scoped>
li {
  display: inline;
  cursor: pointer;
}
.tabli{
  font-size: 8px;
  padding: 5px;
  text-align: center;
  height: 42px;
  width: 102px;
  background-size: cover;
  // background-image: url('../../assets/icons_slices/img_pop.png');
}
.bagPop{
  background-size: cover;
      border-radius: 3px;
  color: aliceblue;
  background-color: rgb(64, 158, 255);
  // background-image: url('../../assets/icons_slices/img_pop.png');
}
.softwareLibrary-row {
  // margin-bottom: 10px;
}
.softwareLibrary {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    // line-height: 46px;
  }
}
</style>
